import React, { useEffect, useState } from 'react';
import http from '../utils/request';
import fosterCss from './beautycss.module.css';
import { BrowserRouter as Router,useNavigate} from 'react-router-dom'
// 定义 banner 数据类型
interface BannerItem {
    id: number;
    imgUrl: string;
}

// 定义 zoo 数据类型
interface ZooItem {
    id: number;
    name: string;
    xing: number;
    area: string;
    km: string;
    imgUrl: string;
}

const Foster: React.FC = () => {
    let navigate=useNavigate()
    // 定义 banner 状态
    const [banner, setBanner] = useState<BannerItem[]>([
        { id: 1, imgUrl: 'https://pic.nximg.cn/file/20230712/25995075_212831507106_2.jpg' },
        { id: 2, imgUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.pXU4dgUpHQhr_e4dozIvmgHaKx?rs=1&pid=ImgDetMain' },
        { id: 3, imgUrl: 'https://bpic.588ku.com/templet_pic/19/07/17/3edeb09897f3919f66a25c7d4ddc8bab.jpg!/fw/750/quality/90/unsharp/true/compress/true' },
    ]);

    // 定义 zoo 状态
    const [zoo, setZoo] = useState<ZooItem[]>([
        { id: 1, name: '猫咪洗澡美容套餐', xing: 1180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 2, name: '犬类洁白洁牙', xing: 1180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.0QV_nJ1APROnM0GZXwZ9_gHaHa?rs=1&pid=ImgDetMain' },
        { id: 3, name: '小型犬抗菌药浴套餐', xing: 1180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://www.2008php.com/2011_Website_appreciate/11-03-06/20110306202206.jpg' },
        { id: 4, name: '葫芦狗狗托管班', xing: 180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://img95.699pic.com/photo/50136/9491.jpg_wh300.jpg' },
        { id: 5, name: '猫咪洗澡美容套餐', xing: 180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 6, name: '小型犬抗菌药浴套餐', xing: 180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 7, name: 'AMT猫咪生活馆', xing: 180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
        { id: 8, name: '犬类洁白洁牙', xing: 180, area: '包含小型犬洗澡、美容服务...', km: '3.55km', imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.05bGAKflVUrlyv86eJrBZQHaHa?rs=1&pid=ImgDetMain' },
    ]);

    // 当前显示的图片索引
    const [currentIndex, setCurrentIndex] = useState<number>(0);

    // 自动轮播功能
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentIndex((prevIndex) => (prevIndex + 1) % banner.length);
        }, 3000); // 每 3 秒切换一次图片

        return () => clearInterval(interval);
    }, [banner]);

    // 点击指示点切换图片
    const handleDotClick = (index: number): void => {
        setCurrentIndex(index);
    };

    return (
        <div>
            {/* 头部导航 */}
            <header className={fosterCss.heder}>
                <div>
                    <img onClick={()=>{navigate('/layout/homeList')}}
                        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qm9jJuyieNkBLse7ZyX2ZwHaGL?rs=1&pid=ImgDetMain"
                        alt=""
                        width='40px'
                    />
                </div>
                <div>
                    <h3 style={{ marginLeft: '-50px' }}>美容</h3>
                </div>
                <div></div>
            </header>
            {/* 主体内容 */}
            <div className={fosterCss.main}>
                {/* 轮播图 */}
                <div className={fosterCss.slider}>
                    <img
                        src={banner[currentIndex].imgUrl}
                        alt={`Banner ${currentIndex + 1}`}
                        className={fosterCss.sliderImg}
                    />
                    {/* 指示点 */}
                    <div className={fosterCss.dots}>
                        {banner.map((_, index) => (
                            <span
                                key={index}
                                className={`${fosterCss.dot} ${index === currentIndex ? fosterCss.activeDot : ''}`}
                                onClick={() => handleDotClick(index)}
                            ></span>
                        ))}
                    </div>
                </div>
                <div className={fosterCss.mainTop}>
                    <h2>美容服务</h2>
                    <div style={{ marginBottom: '100px' }}>
                        {/* 循环渲染zoo列表 */}
                        {zoo.map((item) => (
                            <div key={item.id} className={fosterCss.listOne}>
                                <span className={fosterCss.listOneImg}>
                                    <img src={item.imgUrl} alt={item.name} />
                                </span>
                                <span className={fosterCss.listOneText}>
                                    <div className={fosterCss.listOneTitle}>
                                        <span className={fosterCss.Namecss}>{item.name}</span>
                                    </div>
                                    <div>
                                        <span>{item.area}</span>
                                    </div>
                                    <span className={fosterCss.my}>
                                        <span style={{color:'red'}}>￥{item.xing}</span>
                                        <button  onClick={()=>{navigate('/layout/shoping')}} className={fosterCss.listZi}>购买</button>
                                        </span>
                                </span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Foster;